/*
 * @Date: 2019-12-2
 * @Author: xuechengwu <xuechengwu@erayt.com>
 * @Description: 分时层
 */
import BaseLayer from './BaseLayer';
import Point from '../core/Point';
import MultiLine from '../base/MultiLine';
import Color from '../core/Color';

import Text from '../base/Text';
import Rectangle from '../base/Rectangle';

export default class MiniLayer extends BaseLayer {
    constructor(canvas, option) {
        super(canvas);
        this.width = option.width;
        this.height = option.height;
        this.timesNum = option.timesNum || 24 * 60 * 60;
        this.lastClose = option.lastClose || 0;
        this.data = option.data || [];
        this.color = option.color || '#333333';
        this.overlyings = option.overlyings || [];
    }

    /**
     * 渲染
     */
    make() {
        this.childs.splice(0, this.childs.length);
        if (this.data.length === 0) {
            return;
        }
        let max = -10000000, min = 99999999999, maxD = -100000000000;
        let maxIndex = -1, minIndex = -1;
        for (let i = 0; i < this.data.length; i++) {
            const diff = Math.abs(this.data[i].price - this.lastClose);
            if (diff > max) {
                max = diff;
            }
            if (maxD < this.data[i].price) {
                maxD = this.data[i].price;
                maxIndex = i;
            }
            if (min > this.data[i].price) {
                min = this.data[i].price;
                minIndex = i;
            }
        }
        for (let overlying of this.overlyings) {
            for (let i = 0; i < overlying.data.length; i++) {
                const diff = Math.abs(overlying.data[i].price - this.lastClose);
                if (diff > max) {
                    max = diff;
                }
            }
        }
        const yStep = this.height / 2 / max;
        const xStep = this.width / this.timesNum;
        const base = this.lastClose - max;
        let points = [];
        for (let i = 0; i < this.data.length; i++) {
            const point = new Point(this.position.x + i * xStep, this.position.y + (this.data[i].price - base) * yStep);
            points.push(point);
        }
        let multiLine = new MultiLine(this.canvas, points);
        multiLine.setColor(new Color(this.color));
        this.addChild(multiLine);
        for (let overlying of this.overlyings) {
            let points = [];
            for (let i = 0; i < overlying.data.length; i++) {
                const point = new Point(this.position.x + i * xStep, this.position.y + (overlying.data[i].price - base) * yStep);
                points.push(point);
            }
            let line = new MultiLine(this.canvas, points);
            line.setColor(new Color(overlying.color));
            this.addChild(line);
        }
        // 画最高点

        if (maxIndex * xStep < 20 + `${maxD}`.length * 6.25) {
            let directLine = new MultiLine(this.canvas, [
               new Point(this.position.x + maxIndex * xStep, this.position.y + (maxD - base) * yStep),
               new Point(this.position.x + maxIndex * xStep, this.position.y + (maxD - base) * yStep + 10),
               new Point(this.position.x + 20 + maxIndex * xStep, this.position.y + (maxD - base) * yStep + 10)
            ]);
            directLine.setColor(new Color('#EF4743'));
            let box = new Rectangle(this.canvas, {
                width: `${maxD}`.length * 0.625 * 15 + 4,
                height: 18,
                color: new Color('#EF4743'),
            });
            box.setPosition(this.position.x + 24 + maxIndex * xStep, this.position.y + (maxD - base) * yStep + 1);
            let txt = new Text(this.canvas, {
                text: `${maxD}`,
                color: new Color('#FFFFFF'),
                size: 15,
                font: 'PingFang SC'
            });
            txt.setPosition(this.position.x + 26 + maxIndex * xStep, this.position.y + (maxD - base) * yStep + 2.5);
            this.addChild(directLine, box, txt);
        } else {
            let directLine = new MultiLine(this.canvas, [
                new Point(this.position.x + maxIndex * xStep, this.position.y + (maxD - base) * yStep),
                new Point(this.position.x + maxIndex * xStep, this.position.y + (maxD - base) * yStep + 10),
                new Point(this.position.x - 20 + maxIndex * xStep, this.position.y + (maxD - base) * yStep + 10)
            ]);
            directLine.setColor(new Color('#EF4743'));
            let box = new Rectangle(this.canvas, {
                width: `${maxD}`.length * 0.625 * 15 + 4,
                height: 18,
                color: new Color('#EF4743'),
            });
            box.setPosition(this.position.x - 24 + maxIndex * xStep - `${maxD}`.length * 0.625 * 15, this.position.y + (maxD - base) * yStep);
            let txt = new Text(this.canvas, {
                text: `${maxD}`,
                color: new Color('#FFFFFF'),
                size: 15,
                font: 'PingFang SC'
            });
            txt.setPosition(this.position.x -22 + maxIndex * xStep - `${maxD}`.length * 6.25, this.position.y + (maxD - base) * yStep + 2.5);
            this.addChild(directLine, box, txt);
        }

        //绘制最低价
        if (minIndex * xStep < 20 + `${maxD}`.length * 6.25) {
            let directLine = new MultiLine(this.canvas, [
                new Point(this.position.x + minIndex * xStep, this.position.y + (min - base) * yStep),
                new Point(this.position.x + minIndex * xStep, this.position.y + (min - base) * yStep - 10),
                new Point(this.position.x + 20 + minIndex * xStep, this.position.y + (min - base) * yStep - 10)
            ]);
            directLine.setColor(new Color('#3FE733'));
            let box = new Rectangle(this.canvas, {
                width: `${min}`.length * 0.625 * 15 + 4,
                height: 18,
                color: new Color('#3FE733'),
            });
            box.setPosition(this.position.x + 24 + minIndex * xStep, this.position.y + (min - base) * yStep - 19);
            let txt = new Text(this.canvas, {
                text: `${min}`,
                color: new Color('#FFFFFF'),
                size: 15,
                font: 'PingFang SC'
            });
            txt.setPosition(this.position.x + 26 + minIndex * xStep, this.position.y + (min - base) * yStep - 17.5);
            this.addChild(directLine, box, txt);
        } else {
            let directLine = new MultiLine(this.canvas, [
                new Point(this.position.x + minIndex * xStep, this.position.y + (min - base) * yStep),
                new Point(this.position.x + minIndex * xStep, this.position.y + (min - base) * yStep - 10),
                new Point(this.position.x - 20 + minIndex * xStep, this.position.y + (min - base) * yStep - 10)
            ]);
            directLine.setColor(new Color('#3FE733'));
            let box = new Rectangle(this.canvas, {
                width: `${min}`.length * 0.625 * 15 + 4,
                height: 18,
                color: new Color('#3FE733'),
            });
            box.setPosition(this.position.x - 24 + minIndex * xStep - `${min}`.length * 0.625 * 15, this.position.y + (min - base) * yStep - 20);
            let txt = new Text(this.canvas, {
                text: `${min}`,
                color: new Color('#FFFFFF'),
                size: 15,
                font: 'PingFang SC'
            });
            txt.setPosition(this.position.x - 20 + minIndex * xStep - `${min}`.length * 0.625 * 15, this.position.y + (min - base) * yStep - 17.5);
            this.addChild(directLine, box, txt);
        }
        this.onMaked && this.onMaked({
            points,
            xStep,
            yStep,
            pcg: max,
            lastClose: this.lastClose
        });

    }
}
